<template>
	<view style="background: #f5f5f5;overflow: hidden;">

		<view class="top-tabbar importPage" id="importPage" style="gap:20rpx;justify-content: flex-start;">
			<view v-for="(item,index) in tabs" style="justify-content: flex-start;flex: none;"
				:class="state_active == index ? 'tab-item tab-item_active' : 'tab-item'">
				<view class="tabber-top-name" @click="onSelTab(item,index)">
					
					<view>

						<text class="tabber-top-name-t1">
							{{item.title}}
						</text>
						<span class="tabber-top-name-span"
							:style="{background:item.status=='进行中'?'#17a452':'#FF7A04'}">{{item.status}}
						</span>
						<text class="tabber-top-name-t2">
							{{item.startTime}} - {{item.endTime }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="scoolMain">
			<scroll-view scroll-y="true" class="scroll-Y" :refresher-triggered="triggered" :refresher-threshold="30"
				refresher-enabled="true" refresher-background="transparent" @refresherrefresh="onRefresh"
				@scrolltolower="onScrolltolower"  :style="{height:(scrollHeight - 35) +'px'}">
				<view class="cardItem" v-for="item in dataRows" :key="item.productId">
					<card :name="item.productName" :productType="2"  :product-id="item.productId" :image="item.filePath"
						:sell-count="item.totalSales" :price="item.productPrice" @onToChart="onToChart"
						@onProductClick="onProductClick">
						<template #default>
							<text class="textSlot">总库存: {{item.product.productStock}}</text>
							<text class="textSlot">{{item.product.categoryParentName}};
								{{item.product.spec}}; {{ item.product.skuList[0].color}}
							</text>
							<text class="textSlot">发货时间: {{item.sendTime}}</text>
						</template>
					</card>
				</view>
				<view class="nomore">没有更多数据</view>
			</scroll-view>
		</view>
		<tabBottom></tabBottom>
		<spacForm :isPopup="isPopup" :productModel="productModel" @close="closePopup"></spacForm>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {

		components: {

		},
		data() {
			return {
				current: 0,
				phoneHeight: 0,
				scrollHeight: 0,
				headerH: 0,
				triggered: false,
				canLoad: true,
				tabHeight: 0,
				tabs: [],
				activeTitle: '',
				dataRows: [],
				productModel: {},
				isPopup: false,
				appid: '',
				state_active: 0,
				ActivityId:''

			};
		},
		mounted() {
			const $this = this
			$this.$nextTick(() => {
				$this.init()
			})
		},
		onLaunch(e) {
			const $this = this
			$this.appid = e.appId
		},
		methods: {
			onProductClick(e) {
				this.gotoPage('/pages/product/detail/activityDetail?productId=' + e + '&appId=' + this.appid + '&activityId='+this.ActivityId)
				
			},
			onToChart(e) {
				const $this = this
				uni.showLoading({
					title: 'loading'
				})
				$this._get(
					'product/product/detail', {
						productId: e,
						url: ''
					},
					function(res) {
						uni.hideLoading()
						const {
							data,
							code
						} = res
						if (code === 1) {
							$this.productModel = data
							$this.isPopup = true
						}
					})

			},
			closePopup(e) {
				this.isPopup = false
			},
			loadActive() {
				uni.showLoading({
					title: 'loading...'
				})
				const $this = this
				$this._get('plus/seckill/product/active', {
					activityType: 5
				}, function(res) {
					uni.hideLoading()
					const {
						code,
						data
					} = res
					if (code === 1) {
						data.forEach(f => {
							if (f.startDate && f.dayStartTime) {
								const ts = f.dayStartTime.split(':')
								const te = f.dayEndTime.split(':')
								const fv = ts[0] + ':' + ts[1]
								const ev = te[0] + ':' + te[1]
								const json = {
									startTime: fv,
									endTime:ev,
									status: f.startStatus === 1 ? '进行中' : '即将开始',
									title: f.title,
									seckillActivityId: f.seckillActivityId
								}
								$this.activeTitle = json.title
								$this.tabs.push(json)
								$this.ActivityId = $this.tabs[0].seckillActivityId
							}

						})
						$this.tabs[0] && $this.loadAcitveProducts($this.tabs[0]['seckillActivityId'])
					}
				})
			},
			onSelTab(item, index) {
				this.state_active = index;
				this.ActivityId = item['seckillActivityId'];
				this.loadAcitveProducts(item['seckillActivityId'])
			},
			loadAcitveProducts(activeId) {

				uni.showLoading({
					title: 'loading...'
				})
				const $this = this
				$this._get('/plus/seckill/product/product', {
					seckillActivityId: activeId
				}, function(res) {
					uni.hideLoading()
					const {
						code,
						data
					} = res
					if (code === 1) {
						$this.dataRows = [];
						$this.dataRows = data.list
						console.log('data', data)
					}
				})
			},
			onRefresh() {
				console.log('刷新')
				this.triggered = false


			},
			onScrolltolower() {
				console.log('下啦加载')
			},
			changeTab(e) {
				this.activeTitle = this.tabs[e].title
				console.log('eee', e)
			},
			init() {
				const $this = this
				const header = uni.createSelectorQuery()
					.in(this)
					.select("#importPage")
				header.boundingClientRect(data => {
					if (data) {
						let h = data.height;
						$this.headerH = h
						$this.scrollHeight = $this.phoneHeight - h - $this.tabHeight
					}

				}).exec();
				const taber = uni.createSelectorQuery()
					.in(this).select('.taber');
				taber.boundingClientRect(data => {
					if (data) {
						let h = data.height;
						$this.tabHeight = h
						$this.scrollHeight = $this.phoneHeight - h - $this.headerH
					}

				}).exec()
				$this.loadActive()
			}
		},

		onLoad() {

		},
		onShareTimeline() {

		},
		onUnload() {

		},
		created() {
			const $this = this
			uni.getSystemInfo({
				success(res) {
					$this.phoneHeight = res.windowHeight;
				}
			});
		}

	}
</script>
<style lang="less" scoped>
	.tab-item_active {
		border-bottom: 8rpx solid #17a452;
	}

	.tabber-top-name {
		line-height: 40rpx;
		display: flex;

		.tabber-top-name-span {
			display: inline-block;
			margin-right: 5rpx;
			font-size: 22rpx;
			color: #fff;
			border-radius: 10rpx;
			padding: 2rpx 5rpx;
			line-height: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}

		.tabber-top-name-t1 {
			color: #000;
		}

		.tabber-top-name-t2 {
			font-size: 28rpx;
			display: block;
			color: #666;

		}
	}

	.textSlot {
		padding-left: 10rpx;
		color: #827d7d;
		display: block
	}

	.importPage {
		width: 100%;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.importPage .improtTitle {
		text-align: center;
		font-weight: bold;
		color: #fff;
		padding: 20rpx;
	}

	.importPage .timeline {

		padding: 0rpx 30rpx;
		position: fixed;
		width: 90%;
		margin-top: 20rpx;
	}

	.swiperMain {
		display: flex;
		gap: 30rpx
	}

	.timeItem {
		height: 100rpx;
		flex: 1
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.cardItem {
		width: 100%;

		margin: 20rpx auto 30rpx auto;

	}

	.scoolMain {
		position: relative;
		padding: 20rpx 0rpx;
		padding-top: 0;
	}

	.nomore {
		text-align: center;
		padding: 20rpx;

		color: #8d8787ef;
	}
</style>